<template>
    <div class="content" :style="{borderColor: getColor}">
        <div class="title" style="width: 220px;margin-bottom: 2px;font-weight: bold">
            <div>
                主 &nbsp;&nbsp;动 &nbsp;&nbsp;出 &nbsp;&nbsp;示
            </div>
            <div>
                配 &nbsp;&nbsp;合 &nbsp;&nbsp;检 &nbsp;&nbsp;查
            </div>
        </div>
        <div class="qrcode">
            <div class="box" style="padding: 10px" :style="{borderColor:getColor}">
                <template v-if="loading" style="text-align:center;">
                    <van-row>
                        <van-col span="24" style="margin-top:80px; text-align:center;">
                            <van-loading type="spinner" size="36px"
                                         text-size="20px" vertical>
                                加载中
                            </van-loading>
                        </van-col>
                    </van-row>
                </template>
                <div id="qrCode" ref="qrCode"></div>
            </div>
        </div>
        <div class="user-info">
            <van-row type="flex" justify="center">
                <van-col span="12" style="font-size: 14px;text-align:center;margin-bottom: 5px">
                    <span style="color: red">{{totalTime}}</span>秒后自动刷新
                </van-col>
            </van-row>
            <van-row type="flex" justify="center">
                <div class="main-tip">
                    <div :style="{color:getColor}">验证信息正确</div>
                </div>
            </van-row>
            <div class="table-info" :style="{borderColor:getColor}">
                <van-row style="border-bottom:1px solid;text-align: center" class="table-info-row2"
                         :style="{borderColor:getColor}">
                    <van-col span="4" class="table-info-row2-col table-right-border title-x"
                             :style="{borderColor:getColor}">
                        <div>姓名</div>
                    </van-col>
                    <van-col span="6" class="table-info-row2-col table-right-border value"
                             :style="{borderColor:getColor}">
                        {{getName}}
                    </van-col>
                    <van-col span="4" class="table-info-row2-col table-right-border title-x"
                             :style="{borderColor:getColor}">
                        性别
                    </van-col>
                    <van-col span="3" class="table-info-row2-col table-right-border value"
                             :style="{borderColor:getColor}">
                        {{userInfo.sex}}
                    </van-col>
                    <van-col span="4" class="table-info-row2-col table-right-border title-x"
                             :style="{borderColor:getColor}">
                        年龄
                    </van-col>
                    <van-col span="3" class="table-info-row2-col value">
                        {{getAge}}
                    </van-col>
                </van-row>
                <van-row class="table-info-row2" type="flex" align="center">
                    <van-col span="4" class="table-info-row2-col table-right-border title-x"
                             :style="{borderColor:getColor}">
                        地址
                    </van-col>
                    <van-col span="20" class="table-info-row2-col value" style="padding-left:5px">
                        {{userInfo.loc_address}}
                    </van-col>
                </van-row>
            </div>
            <template v-if="userInfo.personList !== undefined &&userInfo.personList !== null &&userInfo.personList !== ''&&userInfo.personList !== []">
                <div class="table-info" :style="{borderColor:getColor}"
                     v-for="(item,index) in userInfo.personList" :key="index">
                    <van-row style="text-align: center" class="table-info-row2"
                             :style="{borderColor:getColor}">
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            <div>姓名</div>
                        </van-col>
                        <van-col span="8" class="table-info-row2-col table-right-border value"
                                 :style="{borderColor:getColor}">
                            {{item.name}}
                        </van-col>
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            关系
                        </van-col>
                        <van-col span="8" class="table-info-row2-col value">
                            {{item.relation}}
                        </van-col>
                    </van-row>
                </div>
            </template>
            <template v-if="userInfo.childrenList !== undefined &&userInfo.childrenList !== null &&userInfo.childrenList !== ''&userInfo.childrenList !== []">
                <div class="table-info" :style="{borderColor:getColor}"
                     v-for="(item,index) in userInfo.childrenList" :key="index">
                    <van-row style="text-align: center" class="table-info-row2"
                             :style="{borderColor:getColor}">
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            <div>姓名</div>
                        </van-col>
                        <van-col span="8" class="table-info-row2-col table-right-border value"
                                 :style="{borderColor:getColor}">
                            {{item.name}}
                        </van-col>
                        <van-col span="4" class="table-info-row2-col table-right-border title-x"
                                 :style="{borderColor:getColor}">
                            关系
                        </van-col>
                        <van-col span="8" class="table-info-row2-col value">
                            {{item.relation}}
                        </van-col>
                    </van-row>
                </div>
            </template>
        </div>

    </div>
</template>

<script>
import QRcode from 'qrcodejs2'
import distData from '@/libs/dist.js'
import { SelectRandomNumber } from '@/api/yi-qing-fang-kong'
import {
  // noSensitiveName,
  getAgeByIdCard
} from '@/libs/tools'

export default {
  name: 'QrCodeTime',
  data () {
    return {
      qrColor: distData.qrColor,
      loading: true,
      totalTime: 0,
      randomNum: ''
    }
  },
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  mounted () {
    this.interval()
  },
  computed: {
    getColor () {
      return this.qrColor[this.userInfo.type]
    },
    getName () {
      // return noSensitiveName(this.userInfo.name)
      return this.userInfo.name
    },
    getAge () {
      return getAgeByIdCard(this.userInfo.card_no)
    }
  },
  methods: {
    interval () {
      let _this = this
      this.con = setInterval(() => {
        // console.log('倒计时', _this.totalTime)
        if (_this.totalTime === 0) {
          // 清空渲染的二维码
          console.log('执行刷新')
          _this.$refs.qrCode.innerHTML = ''
          _this.totalTime = 60
          // 调用随机码
          _this.getRandomNumber()
          return false
        } else {
          _this.totalTime -= 1
        }
      }, 1000)
    },
    bindQRCode () {
      console.log('二维码生成时候的随机码', this.randomNum)
      let qrcode = new QRcode('qrCode', {
        width: 200,
        height: 200, // 高度
        text: this.$common.xeUtils.locat().origin + '/#/epidemic-user-info?randomNum=' + this.randomNum, // 二维码内容
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: this.getColor, // 二维码颜色
        colorLight: '#ffffff' // 二维码背景色
      })
      console.log('-二维码-', qrcode)
    },
    getRandomNumber () {
      // 调取随机串接口
      this.loading = true
      SelectRandomNumber().then(ret => {
        let data = ret.data
        console.log('定时生成串回调', data)
        if (data.errcode === 0) {
          this.randomNum = data.data.num
          this.totalTime = data.data.surplus_second
          this.bindQRCode()
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="less">
    .content {
        top: 5.5rem;
        position: absolute;
        background-color: white;
        border-radius: 5px;
        width: 280px;
        height: auto;
        padding-bottom: 25px;
        border: 1px solid;

        .qrcode {
            display: flex;
            justify-content: center;
        }

        .qrcode .box {
            border: 1px solid red;
        }

        .title {
            padding-top: 15px;
            /*letter-spacing: 0.375rem;*/
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            font-size: 12px;
            color: red;
        }

    }

    .user-info {
        padding: 5px 10px 10px 10px;

        .name {
            color: #363636;
            font-weight: bold;
        }

        .address {
            font-size: 14px;
        }
    }

    .table-info {
        padding: 0px 4px 0 4px;
        border: 1px solid;
        margin-bottom: 10px;

        .table-info-row {
            display: flex;
            align-items: center;
        }

        .table-info-row2 {
            height: 45px;

            .table-right-border {
                border-right: 1px solid;
            }

            .table-left-border {
                margin-left: -1px;
                border-left: 1px solid #DDDDDD;
                padding: 5px 0 5px 0;
            }

            .table-right-border-end {
                padding: 5px 0 5px 0;
            }

            .table-info-row2-col {
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .table-col {
            display: flex;
            align-items: center;
            padding: 5px 0 5px 0;

            .address-width {
                width: 50px;
            }
        }
    }

    .title-x {
        font-size: 14px;
    }

    .value {
        color: #787878;
        font-size: 13px;
    }

    .main-tip {
        text-align: center;
        font-size: 26px;
        font-weight: 700;
    }
</style>
